<template>
    <ul>
        <li :style="{opacity}">欢迎学习Vue</li>
        <li>news001 <input type="text" value=""/></li>
        <li>news002 <input type="text" value=""/></li>
        <li>news003 <input type="text" value=""/></li>
    </ul>
</template>

<script>
    export default {
        name:'News',
        data() {
            return {
                opacity:1
            }
        },
        // beforeDestroy(){
        //     console.log("News组件即将被销毁了！！！");
        //     clearInterval(this.timer);
        // },
        // mounted(){
        //     this.timer=setInterval(() => {
        //         console.log("@@@@@@");
        //         this.opacity-=0.01;
        //         if (this.opacity<=0) {
        //             this.opacity=1;
        //         }
        //     }, 16);
        // }
        activated(){//新的生命周期钩子函数是路由组件独有的(激活路由的意思)
            console.log("News组件被激活了！！！");
            this.timer=setInterval(() => {
                this.opacity-=0.01;
                if (this.opacity<=0) {
                    this.opacity=1;
                }
            }, 16);
        },
        deactivated(){//路由组件独有的生命周期钩子函数(取消激活路由的意思)
            console.log("News组件失活了！！！");
            clearInterval(this.timer);
        }
    }
</script>

<style>

</style>